<template>
  <div class="setBox">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      v-loading="loading"
    >
      <el-form-item label="父栏目" label-width="200px">
        <!--  :disabled="hasParent" -->
        <!-- 下拉框的默认值为初始绑定的父栏目名称 -->
        <el-select v-model="columnFather.columnName" :placeholder="placeholder" @change="test">
          <el-option
            :label="item.columnName"
            :value="item.columnName"
            v-for="(item, index) in parentList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="栏目名称" prop="columnName" label-width="200px">
        <el-input v-model="ruleForm.columnName"></el-input>
      </el-form-item>
      <el-form-item label="栏目路径" prop="columnPath" label-width="200px">
        <el-input v-model="ruleForm.columnPath"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="columnSort" label-width="200px">
        <el-input v-model.number="ruleForm.columnSort"></el-input>
      </el-form-item>
      <el-form-item
        label="栏目关键字(keywords)"
        prop="columnKeyword"
        label-width="200px"
      >
        <el-input v-model="ruleForm.columnKeyword"></el-input>
      </el-form-item>
      <el-form-item
        label="栏目简介(description)"
        prop="desc"
        label-width="200px"
      >
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item label="在导航中显示" prop="columnState" label-width="200px">
        <el-radio-group v-model="ruleForm.columnState">
          <el-radio label="显示"></el-radio>
          <el-radio label="不显示"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="栏目类型" prop="columnType" label-width="200px">
        <el-radio-group v-model="ruleForm.columnType">
          <el-radio label="列表栏目"></el-radio>
          <el-radio label="文章栏目"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// {{$route.params.rowId}}
export default {
  data() {
    return {
      placeholder: "请选择父栏目名称",
      loading: true,
      columnFather: {},
      ruleForm: {
        columnName: "",
        columnPath: "",
        columnSort: "",
        columnState: "",
        columnKeyword: "",
        columnType: 1,
      },
      parentList: [],
      rules: {
        columnName: [
          { required: true, message: "请输入栏目名称", trigger: "blur" },
        ],
        columnPath: [
          { required: true, message: "请输入栏目路径", trigger: "blur" },
        ],
        columnSort: [
          { required: true, message: "请输入栏目路径", trigger: "blur" },
          { type: "number", message: "排序必须为数字值" },
        ],
        columnKeyword: [
          { required: true, message: "请输入至少一个关键字", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 每次点击下拉框,修改fatherId
    test() {
      this.parentList.map( (item, index) => {
        if (item.columnName == this.columnFather.columnName) {
          this.columnFather.columnId = item.columnId
        }
      } )
    },
    // 保存修改
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return false;

        this.$confirm("是否保存当前设置?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            // 拿到当前修改的父栏目id,一级栏目不修改父级栏目时默认fatherId为0
            this.ruleForm.columnFatherId = this.columnFather.columnId ? this.columnFather.columnId : 0;
            this.ruleForm.columnState =
            this.ruleForm.columnState == "不显示" ? 0 : 1;
            let { meta: {status} } = await this.$http.getUpdateColumn(this.ruleForm);
            if (status == 200) {
              this.$router.push("/column");
              this.$message({
                type: "success",
                message: "设置成功",
              });
              window.localStorage.removeItem("columnId");
              window.localStorage.removeItem("columnParent");
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "保存失败",
            });
          });
      });
    },
    cancel() {
      this.$router.push("/column");
    },
    // 初始化页面显示数据
    async initForm() {
      this.getSelect();
      let params = this.$store.state.columnId
        ? this.$store.state.columnId
        : window.localStorage.getItem("columnId");
      let { data: { data } } = await this.$http.getColumnById(params);
      this.ruleForm = data;
      // 是否显示数据处理
      if (data.columnState == 0) {
        this.ruleForm.columnState = "不显示";
      } else {
        this.ruleForm.columnState = "显示";
      }
      // 下拉框数据绑定
      if (data.columnFatherId == 0) {
        this.placeholder = "当前为一级栏目";
      }
      this.loading = false;
    },
    // 获取下拉框数据
    async getSelect() {
      let { data: { data } } = await this.$http.getFatherColumn();
      this.parentList = data;
      // 下拉框父级栏目默认为本身的父级栏目名称
      data.map((item, index) => {
        if (item.columnId == window.localStorage.getItem("columnParent")) {
          this.columnFather = item;
        }
      });
      // 本身为一级栏目时从下拉框剔除本身
      if (window.localStorage.getItem("columnParent") == 0) {
        data.map((item, index) => {
          if (item.columnId == window.localStorage.getItem("columnId")) {
            this.parentList.splice(index, 1);
          }
        });
      }
      this.parentList.push({ columnName: '无', columnId: 0 })
    },
  },
  created() {
    this.initForm();
  },
};
</script>

<style scoped lang="less">
.setBox {
  // padding: 0 250px;
  width: 550px;
  margin-left: 150px;
}
.el-form-item__label {
  width: 200px !important;
}
.btn {
  margin-left: 300px;
  margin-top: 50px;
}
</style>
